<template>
	<div class="page">
		<navigator></navigator>
		<div ref="content" @scroll="handleScroll" class="content-area" style="flex: 1;">
			<div class="flx-row-bw top-area bg-c">
				<left-navigator :close="close"></left-navigator>
				<div class="user-frame-right-area" :class="{ overhidden: overhidden }">
					<!-- <top-navigator @click-menu="clickMenu"></top-navigator> -->
					<div class="right-main-area">
						<router-view />
					</div>
				</div>
			</div>
			<div class="bottom-area" style="flex: 0">
				<footer-nav></footer-nav>
			</div>
			<PageFrameFixedWindow ref="fixAside" @top="handleTop" />
		</div>
	</div>
</template>


<script>
	export default {
		name: "VipUserframe",
		components: {
			navigator: () => import("_c/pageFrame/components/navigator"),
			footerNav: () => import("_c/pageFrame/components/footerNav"),
			leftNavigator: () => import("./components/leftNavigator"),
			// topNavigator: () => import("./components/topNavigator"),
			PageFrameFixedWindow: () => import("_c/pageFrame/components/fixedWindow"),
		},
		data() {
			return {
				close: false,
			};
		},
		mounted() {
      this.$el.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
      // 移除事件监听
      this.$el.removeEventListener('scroll', this.handleScroll);
    },
		methods: {
      handleScroll(event) {
        if (event.target.scrollTop > 400) {
          this.$refs.fixAside.changeTop(true);
        } else {
          this.$refs.fixAside.changeTop(false);
        }
      },
			clickMenu() {
				this.close = !this.close;
			},
			handleTop() {
				const content = this.$refs.content
				content.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			}
		},
		computed: {
			overhidden() {
				if (this.$route.meta.overhidden) return true;
				return false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		overflow: hidden;
	}

	.bg-c {
		background-color: #f3f6fb;
	}

	.content-area {
		overflow-x: hidden;
		overflow-y: auto;
	}

	.top-area {
		max-width: 2500px;
		width: 100%;
		min-width: 1200px;
		margin: 0 auto;
		padding-bottom: 20px;

		.user-frame-right-area {
			width: 100%;
		}

		.overhidden {
			overflow: hidden;
		}

		.right-main-area {
			padding: 0 20px 0px;
		}
	}

	.bottom-area {
		background-color: #fff;
	}
</style>
